@import './modules/reset.scss';
@import './modules/header.scss';
@import './modules/footer.scss';

body {
   background: #ededed;
   color: #666;
   font-size: 14px;
}

// mixin混合：定义样式片段
// 带参数默认值的
@mixin center ($px:1220px) {
   width: $px;

   margin: {
      left: auto;
      right: auto;
   }

   ;
}

main {
   width: 100%;

   .banner {
      @include center(1220px);
      cursor: pointer;
      margin-top: 25px;
      height: 554px;
      img {
         border-radius: 10px;
         width: 1220px;
         height: 554px;
      }
   }

   .wrap {
      @include center(1220px);
      height: 200px;
      border-radius: 8px;
      margin-top: 25px;
      box-sizing: border-box;
      border: 1px solid rgba(0, 0, 0, .14);
      overflow: hidden;
      position: relative;
      display: flex;

      .wrap-img {
         height: 198px;
         flex: 1;
         float: left;
         border-right: 1px solid #efefef;
         box-sizing: border-box;
         position: relative;

         &:hover .mask {
            width: 100%;
            height: 100%;
            background-image: radial-gradient(circle, rgba(255, 255, 255, 0), rgba(0, 0, 0, .1));
            transition: all .5s;
         }

         img {
            width: 100%;
            height: 100%;
         }

         .mask {
            position: absolute;
            width: 0;
            height: 0;
            left: 0;
            transition: all .5s;
            background-image: radial-gradient(circle, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
         }
      }
   }

   .hotShop {
      @include center();
      margin-top: 25px;
      box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);
      border: 1px solid rgba(0, 0, 0, .14);
      border-radius: 8px;
      box-sizing: border-box;
      overflow: hidden;

      &-title {
         width: 100%;
         height: 60px;
         background-color: #fafafa;
         border-bottom: 1px solid rgba(0, 0, 0, .14);

         h2 {
            padding: {
               top: 18px;
               left: 25px;
            }

            font-size: 18px;
            float: left;
         }

         span {
            color: black;
            float: right;
            width: 20px;
            height: 20px;
            box-sizing: border-box;
            background-color: white;
            border: 1px solid #e4e4e4;
            border-radius: 50%;
            text-align: center;
            line-height: 14px;
            font-size: 25px;
            cursor: pointer;
            color: #878787;
         }

         .next {
            margin: {
               top: 18px;
               right: 20px;
            }
         }

         .prev {
            margin: {
               top: 18px;
               right: 20px;
            }
         }

         .click {
            background-color: #fbfbfb;
            color: #d5d5d5;
         }
      }
      //mask
      //下方的wrap那些内容
      &-wrap {
         width: 200%;
         height: 430px;
         // background-color: pink;
         background-color: white;
         overflow: hidden;
         user-select:none; 
         position: relative;
         .box{
            width: 100%;
            height: 430px;
            // background-color: pink;
            background-color: white;
            display: flex;
            overflow: hidden;
            user-select:none; 
            position: absolute;
         }
         &-img {
            cursor: pointer;
            flex-wrap: wrap;
            width: 25%;
            height: 430px;
            box-sizing: border-box;
            border-right: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 45px 0 20px;
            text-align: center;
            transition: all 1s;
            position: relative;
            &:hover{
               background-color: rgba(0, 0, 0, .1);
            }
            &-text {
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: space-between;
               height: 130px;
               margin-top: 10px;

               h3 {
                  color: black;
                  padding: 0 20px;
                
               }

               h5 {
                  font-weight: normal;
                  color: #999999;
               }

               span {
                  display: inline-block;
                  overflow: hidden;
                  margin: 0 5px;
                  padding: 2px;
                  width: 12px;
                  height: 12px;
                  // border: 1px solid #e5e5e5;
                  border: 2px solid wheat;
                  border-radius: 50%;
                  transition: all .15s ease-out;
                  cursor: pointer;
                  &:hover {
                     // border-radius: 0;
                     // background-color: transparent;
                  border: 2px solid red;

                  }
               }
 
               p {
                  display: inline-block;
                  font-family: Arial;
                  font-size: 18px;
                  font-weight: bolder;
                  color: #d44d44
               }

               del {
                  padding-left: 10px;
                  font-weight: 400;
                  color: #ccc;
                  font-size: 12px;
               }
            }
         }
      }
   }
   .list{
      @include center(1220px);
      margin-top: 25px;
      // background-color: pink;
      box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);
      border: 1px solid rgba(0, 0, 0, .14);
      border-radius: 8px;
      box-sizing: border-box;
      overflow: hidden;
      &-top{
         width: 100%;
         height: 60px;
         background-color: #fafafa;
         border-bottom: 1px solid rgba(0, 0, 0, .14);
         h2 {
            padding: {
               top: 18px;
               left: 25px;
            }
            font-size: 18px;
            float: left;
         }
      }
      &-content{
         cursor: pointer;
         width: 100%;
         // height: 860px;
         // background-color: plum;
         box-sizing: border-box;
         background-color: white;
         display: flex;
         flex-direction: row;
         transition: all .5s;
         flex-wrap: wrap;
         &-img{
            flex: 2;
            border-right: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
            box-sizing: border-box;
            img{
              width: 608px;
              height: 430px;
              
            }
         }
         &-wrap{
            flex: 1;
            width: 25%;
            // background-color: red;
            height: 50%;
            box-sizing: border-box;
            border-right: 1px solid #efefef;
            border-bottom: 1px solid #efefef;
            padding: 45px 0 20px;
            text-align: center;
            transition: all 1s;
            // position: relative;
            &:hover{
               background-color: rgba(0, 0, 0, .1);
               // border-color:rebeccapurple;
               // box-shadow: -10px -10px 10px rgba(0, 0, 0, .2) inset;
               // background: linear-gradient(to right,rgba(255,255,255,.9) 80%,rgba(0,0,0,.1));
            } 
           
            .img-box{
               width: 100%;
               height: 228px;
               // background-color: purple;
               position: relative;
               bottom: 5px;
               .img-pro{
                  position: absolute;
                  left: 0;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  width: 216px;
                  height: 216px;
               }
               .img-box-mask{
                  width: 100%;
                  height: 220px;
                  position: absolute;
                  left: 0;
                  right: 0;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  background-color: white;
                  z-index: -1;
               }
            }
            
            h3{
               color: black;
               margin-top: 15px;
               font-size: 14px;
               padding: 0 20px;
               white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
            }
            h5{
               margin: 0 auto;
               margin-top: 15px;
               width: 280px;
               overflow: hidden;
               text-overflow: ellipsis;
               white-space: nowrap;
               font-weight: normal;
               color: #999999;
            }
            .span{
               margin-top: 15px;
            span {
               display: inline-block;
               // overflow: hidden;
               margin: 0 5px;
               padding: 2px;
               width: 8px;
               height: 8px;
               border-radius: 50%;
               transition: all .15s ease-out;
               border: 1px solid #999999;
               cursor: pointer;
               
               img{
                  width: inherit;
                  height: inherit;
                  border-radius: 50%;
                  display: block;
               }
            }
            .span-click{
               // border-radius: 0;
               // background-color: transparent;
            border: 2px solid #666666;
            padding: 1px;
            }
         }
         .price{
            margin-top: 17px;
            p {
               display: inline-block;
               font-family: Arial;
               font-size: 18px;
               font-weight: bolder;
               color: #d44d44
            }

            del {
               padding-left: 10px;
               font-weight: 400;
               color: #ccc;
               font-size: 12px;
            }
         }
        }
      }
   }
}